<template>
	<view>
		<view class="message-list">
			<view class="item-message" @click="toLink(0)">
				<view class="message-badge">
					<uni-badge class="uni-badge-left-margin" :text="listData.sys_message_num" absolute="rightTop" size="small">
						<view class="message-icon">
							<image class="message-icon" src="https://qiniu-cdn.maeiyun.com/imgs/xiaoxi/m1.png" mode=""></image>
						</view>
					</uni-badge>
				</view>
				<view class="message-type">
					<view class="message-title">系统消息</view>
					<view class="message-info">{{listData.sys_message?listData.sys_message.title:'暂无消息'}}</view>
				</view>
			</view>
			<!-- <view class="item-message" @click="toLink(1)">
				<view class="message-badge">
					<uni-badge class="uni-badge-left-margin" :text="listData.technician_message_num" absolute="rightTop" size="small">
						<view class="message-icon">
							<image class="message-icon" src="https://qiniu-cdn.maeiyun.com/imgs/xiaoxi/m2.png" mode=""></image>
						</view>
					</uni-badge>
				</view>
				<view class="message-type">
					<view class="message-title">技师待办消息</view>
					<view class="message-info">{{listData.technician_message?listData.technician_message.title:'暂无消息'}}</view>
				</view>
			</view> -->
			<view class="item-message" @click="toLink(2)">
				<view class="message-badge">
					<uni-badge class="uni-badge-left-margin" :text="listData.order_message_num" absolute="rightTop" size="small">
						<view class="message-icon">
							<image class="message-icon" src="https://qiniu-cdn.maeiyun.com/imgs/xiaoxi/m3.png" mode=""></image>
						</view>
					</uni-badge>
				</view>
				<view class="message-type">
					<view class="message-title">订单消息</view>
					<view class="message-info">{{listData.order_message?listData.order_message.title:'暂无消息'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:{}
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			toLink(type){
				if(type == 0){
					uni.navigateTo({
						url:'/otherpages/message/systemMessage?type=0'
					})
				}else if(type == 1){
					uni.navigateTo({
							url:'/otherpages/message/technicianNewsList'
						})
					
				}else if(type == 2){
					uni.navigateTo({
						url:'/otherpages/message/systemMessage?type=1'
					})
					
				}
			},
			getList(){
				this.request.httpTokenRequest({
					url: "message/getMessgeCount",
					method: "get"
				}, {
					type:1
				}).then(res => {
					if (res.code == 0) {
						this.listData = res.data
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			}
		}
	}
</script>

<style lang="scss">
	.message-list{
		padding: 30rpx;
		padding-top: var(--status-bar-height);
	}
	.item-message{
		display: flex;
		align-items: center;
		height: 139rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.message-icon{
			width: 57rpx;
			height: 60rpx;
		}
		
		.message-type{
			margin-left: 45rpx;
			.message-title{
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #08090A;
			}
			.message-info{
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #A3A3A3;
				margin-top: 10rpx;
				overflow: hidden;
				display: -webkit-box;//设置块元素为伸缩布局
				-webkit-box-orient: vertical;//设置伸缩项的布局方向
				-webkit-line-clamp: 2;//设置文本行数

			}
		}
	}

</style>
